<template>
    <div class="container">
        <div class="map">
            <div :style="{background: color[n -1], color: '#fff'}" :class="`s-${n}`" v-for="n in 8" :key="n">
                <p>{{ n }}</p>
                <p>Lorem ipsum</p>
            </div>
        </div>

        <div class="sections">
            <div :class="`section-${n}`" class="sec" v-for="n in 8" :key="n">
                <div class="header" :style="{background: color[n -1], color: '#fff'}">
                    <p>{{ n }}</p>
                    <p>Raw Materials</p>
                </div>
                <div class="copy" :style="{background: color[n -1], color: '#fff'}">
                    <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Architecto expedita molestiae quae
                        nesciunt
                        laudantium deleniti, vel, ipsum consequatur doloribus aliquam et facilis itaque optio asperiores
                        nam
                        modi! Natus, enim praesentium?
                    </h1>
                </div>
            </div>
            <div class="whitespace"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'StickySection',
    data() {
        return {
            color: ['#14C9C9', '#ff3d01', '#5922cc', '#000', '#2935f8', '#ff113d', '#9FDB1D', '#0afc04']
        }
    },
    mounted() {
        const mapDivs = document.querySelectorAll('.map > div')
        const sectionDivs = document.querySelectorAll('.sections > .sec')
        const sectionHeights = []
        const accumulatedHeights = []
        const RATIO = 0.5

        let accumulatedHeight = 0
        sectionDivs.forEach(section => {
            const height = section.clientHeight
            sectionHeights.push(height * RATIO)
            accumulatedHeight += height
            accumulatedHeights.push(accumulatedHeight)
        })

        let lastActiveIndex = -1

        function updateMapHeights(scrollPos) {
            for (let i = 0; i < accumulatedHeights.length; i++) {
                if (i === 0 && scrollPos < accumulatedHeights[i]) {
                    if (lastActiveIndex !== i) {
                        if (lastActiveIndex >= 0) {
                            mapDivs[lastActiveIndex].style.setProperty('height', '100px')
                        }
                        mapDivs[i].style.setProperty('height', `${sectionHeights[i]}px`)
                        lastActiveIndex = i;
                    }

                    break
                } else if (i > 0 && scrollPos >= accumulatedHeights[i - 1] && scrollPos < accumulatedHeights[i]) {
                    if (lastActiveIndex !== i) {
                        if (lastActiveIndex >= 0) {
                            mapDivs[lastActiveIndex].style.setProperty('height', '100px')
                        }
                        mapDivs[i].style.setProperty('height', `${sectionHeights[i]}px`)
                        lastActiveIndex = i;
                    }

                    break
                }
            }
        }

        const sectionsTotalHeight = [...sectionDivs].reduce((sum, section) => sum + section.clientHeight, 0)
        const mapTotalHeight = [...mapDivs].reduce((sum, map) => sum + map.clientHeight, 0) + (mapDivs.length - 1) * 75
        const sectionScrollHeight = sectionsTotalHeight - window.innerHeight
        const mapScrollHeight = mapTotalHeight - window.innerHeight
        const scrollRatio = mapScrollHeight / sectionScrollHeight

        window.addEventListener('scroll', () => {
            const scrollPos = window.scrollY

            const mapTranslateY = scrollPos * scrollRatio
            document.querySelector('.map').style.transform = `translateY(-${mapTranslateY}px)`

            updateMapHeights(scrollPos)
            updateMapHeights(scrollPos)
        })
    }
}
</script>

<style lang="less" scoped>
@backgroundColor: #c0c0c0;

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat';
}

.container {
    width: 100%;
    height: 100%;
    background-color: @backgroundColor;

    .map {
        position: fixed;
        width: 20%;
        margin: 50px 0;
        padding: 0 20px;

        div {
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 20px;
            border: 1.5px solid #000;
            border-radius: 20px;
            transition: height 0.5s;
        }
    }

    .sections {
        position: absolute;
        width: 80%;
        height: 100%;
        left: 20%;
        padding: 30px 20px 0 0;

        div {
            width: 100%;
            margin: 20px 0 80px 0;

            p:nth-child(1) {
                font-size: 13px;
            }

            p:nth-child(2) {
                font-size: 16px;
            }
        }

        .header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px 25px;
            border: 1.5px solid #000;
            border-radius: 40px;
            font-size: 14px;
        }

        .copy {
            width: 100%;
            height: 100%;
            padding: 20px;
            border: 1.5px solid #000;
            border-radius: 20px;

            h1 {
                font-weight: 300;
                font-size: 60px;
            }
        }

        each(range(8), {
            .section-@{value} {
                height: (500px + 50px * (@value - 1));
            }
        })

        .whitespace {
            width: 100%;
            height: 100px;
            border: none;
        }
    }
}
</style>